const BACKGROUND_COLORS = [
  '#f2f1f6', '#d8d7e1', '#b9b8c9', '#9a99b1',
  '#7b7a99', '#5c5b81', '#3d3c69', '#1e1d51', '#000039'
];
const SHAPES = [
  'circle', 'square', 'triangle', 'diamond',
  'pentagon', 'hexagon', 'star'
];
const SHAPE_COLORS = [
  '#ffbe0b', '#fb5607', '#ff006e',
  '#8338ec', '#3a86ff'
];

function getRandomItem<T>(arr: T[], seed: number): T {
  return arr[Math.floor(seed % arr.length)];
}

function generateShape(seed: number, size: number, i: number): string {
  const shapeType = getRandomItem(SHAPES, seed + i);
  const shapeColor = getRandomItem(SHAPE_COLORS, seed + i * 2);
  const shapeSize = size * (0.15 + (seed % 10) / 50); // 15% - 35% of size
  const x = (size * 0.2) + ((seed * i * 3) % (size * 0.6));
  const y = (size * 0.2) + ((seed * i * 5) % (size * 0.6));
  const rotation = (seed * i * 7) % 360;

  switch (shapeType) {
    case 'circle':
      return `<circle cx="${x + shapeSize / 2}" cy="${y + shapeSize / 2}" r="${shapeSize / 2}" fill="${shapeColor}" />`;
    case 'square':
      return `<rect x="${x}" y="${y}" width="${shapeSize}" height="${shapeSize}" fill="${shapeColor}" transform="rotate(${rotation} ${x + shapeSize / 2} ${y + shapeSize / 2})" />`;
    case 'triangle':
      return `<polygon points="${x},${y + shapeSize} ${x + shapeSize / 2},${y} ${x + shapeSize},${y + shapeSize}" fill="${shapeColor}" transform="rotate(${rotation} ${x + shapeSize / 2} ${y + shapeSize / 2})" />`;
    case 'diamond':
      return `<polygon points="${x + shapeSize / 2},${y} ${x + shapeSize},${y + shapeSize / 2} ${x + shapeSize / 2},${y + shapeSize} ${x},${y + shapeSize / 2}" fill="${shapeColor}" transform="rotate(${rotation} ${x + shapeSize / 2} ${y + shapeSize / 2})" />`;
    case 'pentagon':
      return `<polygon points="${x+shapeSize/2},${y} ${x+shapeSize},${y+shapeSize*0.4} ${x+shapeSize*0.8},${y+shapeSize} ${x+shapeSize*0.2},${y+shapeSize} ${x},${y+shapeSize*0.4}" fill="${shapeColor}" transform="rotate(${rotation} ${x + shapeSize / 2} ${y + shapeSize / 2})" />`;
    case 'hexagon':
      return `<polygon points="${x+shapeSize/2},${y} ${x+shapeSize},${y+shapeSize*0.25} ${x+shapeSize},${y+shapeSize*0.75} ${x+shapeSize/2},${y+shapeSize} ${x},${y+shapeSize*0.75} ${x},${y+shapeSize*0.25}" fill="${shapeColor}" transform="rotate(${rotation} ${x + shapeSize / 2} ${y + shapeSize / 2})" />`;
    case 'star':
      return `<polygon points="${x+shapeSize/2},${y} ${x+shapeSize*0.65},${y+shapeSize*0.35} ${x+shapeSize},${y+shapeSize*0.35} ${x+shapeSize*0.75},${y+shapeSize*0.65} ${x+shapeSize*0.85},${y+shapeSize} ${x+shapeSize/2},${y+shapeSize*0.8} ${x+shapeSize*0.15},${y+shapeSize} ${x+shapeSize*0.25},${y+shapeSize*0.65} ${x},${y+shapeSize*0.35} ${x+shapeSize*0.35},${y+shapeSize*0.35}" fill="${shapeColor}" transform="rotate(${rotation} ${x + shapeSize / 2} ${y + shapeSize / 2})" />`;
    default:
      return '';
  }
}

export function getAvatarUrl(userId: string | number, size = 100): string {
  if (!userId) {
    userId = 'default';
  }
  const seed = userId.toString().split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  const backgroundColor = getRandomItem(BACKGROUND_COLORS, seed);

  const shapes = Array.from({ length: 3 })
    .map((_, i) => generateShape(seed, size, i + 1))
    .join('');

  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
    <rect width="100%" height="100%" fill="${backgroundColor}" />
    ${shapes}
  </svg>`;

  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`;
} 